import { getStorage } from "../../utils/util";
import { getBlog } from "../../utils/api";
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast';
// 选择器
let query: any;
// 当前第几页
let page = 1;
// 一页多少数据
let number = 10;
// 请求类型
let type = 0;
// 数据库中有多少数据 分页计算页尾使用
let blogCount = 0;
// 左侧数组索引
let leftLen = 0;
// 右侧数组索引
let rightLen = 0;
// 是否触底
let dropDownFlag = false;
// 当前加载图片到第几个了 限制下拉使用
let tempNumber = 1;
// 动态索引
let index = 0;
// 临时数组
let oList: any = [];
// 左右容器高度
let leftHeight = 0,
  rightHeight = 0;
Page({
  data: {
    dropDownLoadingState: false,
    topSide: 0,
    rectHeight: 0,
    inputWidth: 0,
    contentHeight: 0,
    classificationArr: [
      {
        id: 1,
        value: "热门",
        target: "hot",
        isActive: true,
        type: 0
      },
      {
        id: 2,
        value: "女士发型",
        target: "woman",
        isActive: false,
        type: 1
      },
      {
        id: 3,
        value: "男士发型",
        target: "man",
        isActive: false,
        type: 2
      },
      {
        id: 4,
        value: "孩童发型",
        target: "child",
        isActive: false,
        type: 3
      },
      {
        id: 6,
        value: "剪同款",
        target: "same",
        isActive: false,
        type: 4
      }
    ],
    headerImage: null,
    leftList: [],
    rightList: []
  },
  // 触底加载
  async onNextPage() {
    if (page * number > blogCount) {
      Toast('🙂到底了哦~~🙂');
    }
    if (!dropDownFlag) {
      return;
    }
    dropDownFlag = false;
    page++;
    const { rows, count } = await getBlog({ page, number, type, random: Math.random() });
    blogCount = count;
    oList = rows;
    this.afterRenderBlog();
  },
  // 切换按钮
  async onChangeClassificationFn(e: any) {
    page = 1;
    leftLen = 0;
    rightLen = 0;
    leftHeight = 0;
    rightHeight = 0;
    tempNumber = 1;
    const target = e.currentTarget.dataset.target;
    type = e.currentTarget.dataset.type;
    const targetArr = this.data.classificationArr;
    targetArr.forEach(item => {
      item.isActive = item.target == target;
    })
    const { rows, count } = await getBlog({ page, number, type, random: Math.random() });
    blogCount = count;
    oList = rows;
    this.setData({
      classificationArr: targetArr,
      leftList: [],
      rightList: []
    })
    this.renderBlogList();
  },
  // 获取用户信息
  async getUserInfo() {
    // @ts-ignore
    const { userBasicInfo_tb } = await getStorage("userInfo");
    this.setData({
      headerImage: userBasicInfo_tb.headerImage
    })
  },
  // 进入详情页
  onBreakPage(event: any) {
    const id: String = event.currentTarget.dataset.id;
    wx.navigateTo({
      url: `../homeDetails/homeDetails?id=${id}`
    })
  },
  // 获取博客信息
  async onGetBlog() {
    const { rows, count } = await getBlog({ page, number, type, random: Math.random() });
    blogCount = count;
    oList = rows;
    this.beginRenderBlog();

  },
  // 开始渲染博客瀑布流
  beginRenderBlog() {
    query = wx.createSelectorQuery();
    this.afterRenderBlog();
  },
  afterRenderBlog() {
    if (!oList[index]) {
      oList = [];
      index = 0;
      return;
    }
    this.renderBlogList()
  },
  renderBlogList() {
    query.select('.contentLeft').boundingClientRect();
    query.select('.contentRight').boundingClientRect();
    query.exec((res: any) => {
      leftHeight = res[0].height; //获取左边列表的高度
      rightHeight = res[1].height; //获取右边列表的高度
      if (leftHeight > rightHeight) {
        this.setData({
          ["rightList[" + rightLen + "]"]: oList[index]
        }, () => {
          rightLen++;
          index++;
          this.afterRenderBlog();
        })
      } else {
        this.setData({
          ["leftList[" + leftLen + "]"]: oList[index]
        }, () => {
          leftLen++;
          index++;
          this.afterRenderBlog();
        })
      }
    });
  },
  // 图片预加载
  imageLoad(e: any) {
    setTimeout(() => {
      if (tempNumber % 10 == 0) {
        dropDownFlag = true;
      }
      const { position, index } = e.currentTarget.dataset
      if (position == "left") {
        const temp: any = this.data.leftList[index];
        temp['isLoad'] = true;
        this.setData({
          ["leftList[" + index + "]"]: temp
        }, () => {
          tempNumber++;
        })
      } else {
        const temp: any = this.data.rightList[index];
        temp['isLoad'] = true;
        this.setData({
          ["rightList[" + index + "]"]: temp
        }, () => {
          tempNumber++;
        })
      }
    }, 1000)
  },
  // 下拉加载
  onDropDownLoading() {
    page = 1;
    number = 10;
    this.setData({
      leftList: [],
      rightList: []
    })
    this.onGetBlog();
    this.setData({
      dropDownLoadingState: true
    })
    console.log("下拉加载")
  },
  // 跳转关于
  onBreakAbout(){
    wx.switchTab({
      url:"../about/about"
    })
  },
  // HOOK函数
  onLoad() {
    const BC = wx.getMenuButtonBoundingClientRect();
    const WC = wx.getWindowInfo();
    page = 1;
    type = 0;
    blogCount = 0;
    leftLen = 0;
    rightLen = 0;
    tempNumber = 1;
    leftHeight = 0;
    rightHeight = 0;
    this.setData({
      topSide: BC.top,
      rectHeight: BC.height,
      inputWidth: WC.screenWidth - BC.width * 2 - 10,
      contentHeight: WC.screenHeight - BC.top - BC.height - 85,
      leftList: [],
      rightList: []
    })
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
    this.getUserInfo();
    this.onGetBlog();
  }
})
